import { FC, useState } from 'react'
import './index.css'
const LinkInput:FC<LinkIputProps>=(props:LinkIputProps)=>{
  const [state,setSeate] = useState({
    label: props.label,
    type: props.type ? props.type : 'text',
    value:props.value ? props.value :undefined
  })
  // 监听onChange事件
 const onChange = (e: any) => {
   if(props.onChange) {
    props.onChange(e)
   }
    
    setSeate(state=>{
      state.value = e.target.value
      return {...state}
    })

  }
  const { label, type,value } = state
  return (
    <div className='link-input'>
    <div>{label}</div>
    <input type={type} value={value}  onChange={onChange} />
  </div>
  )
}

export default LinkInput
// class linkInput extends react.Component<LinkIputProps> {
//   state: Readonly<LinkIputProps>;
//   constructor(props: LinkIputProps) {

//     super(props)
//     // 参数参考文档
//     this.state = {
//       label: props.label,
//       type: props.type ? props.type : 'text',
//       value:props.value ? props.value :''
//     }

//   }
//   render(): react.ReactNode {
//     const { label, type,value } = this.state
//     return (
//       <div className='link-input'>
//         <div>{label}</div>
//         <input type={type} value={value}  onChange={this.onChange} />
//       </div>
//     )
//   }
//   // 监听onChange事件
//   onChange = (e: any) => {
//     this.props.onChange(e.target.value)
//     this.setState({
//       value:e.target.value
//     })

//   }
// }